<template>
    <div class="group">
        <h1>demo1</h1>
        <div>
            <router-view v-slot="{ Component }">
                <transition mode="out-in" name="slide-fade">
                    <component :is="Component" />
                </transition>
            </router-view>
            <!-- 默认视图 -->
            <router-view name="sidebar" />
            <!-- 命名视图 -->

            <hr />
            <div>
                <button type="button" @click="rPush">router.push跳转</button>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { useRoute, useRouter } from 'vue-router'

const route = useRoute() //路由上下文：能获取路由参数
const router = useRouter() // 路由对象：调用对象的方法

console.log(route.query)
console.log(route.params)

// console.log(router.push)
// console.log(router.replace)
const isLogin = true
const rPush = () => {
    if (isLogin) {
        router.push({
            name: 'xiang1',
            query: {
                id: 1,
                title: '新闻标题',
                content: '内容'
            }
        })
    } else {
        router.replace({
            name: 'xiang1',
            query: {
                id: 1,
                title: '新闻标题',
                content: '内容'
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.group {
    margin: 20px;
    padding: 10px;
    border: 3px solid skyblue;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}


.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>